<template>
  <div class="fluid">
    <div class="container">
      <ul class="listContainer">
        <li @click="route1" v-if="result1.length">
          <img :src="result1[0].logo">
          <p>{{result1[0].name}}</p>
        </li>
        <li class="second-li">
          <ul>
            <li v-for="(item,index) in result1" :key="index" @click="route2(index)" v-if="index>0&&index<9">
              <div style="float:left;width:40%;text-align:right;"><img :src="item.logo" style="width:50px;height:50px"></div>
              <div style="float:left;width:60%;text-align:center;">
                <span>{{item.name}}</span>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      result1: '',
      args: {
        page: 1,
        limit: 10,
        homeShowFlag: 1
      }
    }
  },
  methods: {
    route1() {
      this.$router.push({
        path: this.result1[0].src,
        query: { id: this.result1[0].id }
      })
    },
    route2(index) {
      this.$router.push({
        path: this.result1[index].src,
        query: { id: this.result1[index].id }
      })
    }
  },
  mounted() {
    this.$ajax
      .post(this.Ipurl + 'industryPlan/selectPage', this.args)
      .then(res => {
        this.result1 = res.data.dataInfo.records
        // console.log(this.result1, 'hyfaAll.vue')
      })
  }
}
</script>
<style scoped>
.fluid {
  width: 100%;
  height: 310px;
  background: url('../../assets/img/hyfaAll/bg.png');
}
.container {
  width: 1200px;
  margin: 0 auto;
}
.listContainer > li:hover {
  cursor: pointer;
}
.listContainer > li:nth-child(1) {
  width: 216px;
  height: 200px;
  float: left;
  margin-top: 45px;
  text-align: center;
  background: #fff;
  margin-bottom: 5px;
  margin-left: 3px;
}
.listContainer > li:nth-child(1) > img {
  margin-top: 51px;
}
.listContainer > li:nth-child(1) > p {
  margin-top: 30px;
  font-size: 18px;
  color: rgb(34, 34, 34);
  font-weight: bolder;
}
.listContainer > li:nth-child(2) {
  width: 954px;
  height: 200px;
  float: right;
  margin-top: 45px;
  margin-bottom: 5px;
  margin-right: 3px;
}
.listContainer > li > ul {
  margin-left: -30px;
}
.listContainer > li > ul > li {
  float: left;
  width: 216px;
  height: 85px;
  margin-left: 30px;
  line-height: 85px;
  background: #fff;
}
.listContainer > li > ul > li > div > img {
  margin-left: 40px;
  margin-right: 30px;
}
.listContainer > li > ul > li > div > span {
  font-size: 18px;
  font-weight: bolder;
}
.listContainer > li > ul > li:nth-child(5),
.listContainer > li > ul > li:nth-child(6),
.listContainer > li > ul > li:nth-child(7),
.listContainer > li > ul > li:nth-child(8) {
  margin-top: 30px;
}
.container ul li {
  -moz-box-shadow: 0px 0px 16px #d4d4d4;
  -webkit-box-shadow: 0px 0px 16px #d4d4d4;
  box-shadow: 0px 0px 16px #d4d4d4;
}

.container .second-li {
  box-shadow: none;
}
</style>


